<template>
  <div class="home-container">
    <nav-group />
    <div class="home-content">
      <div class="herder-container">
        <header-uer-info />
      </div>
      <div class="main-container">
        <div class="main-left">
          <search-input />
          <nav-bar-wrap
            :list="routes"
            :select-index="selectIndex"
            @change="handle"
          >
            <template slot="default" slot-scope="scope">
              <svg-icon class="nav-icon" :icon="scope.data.meta.icon" />
              <span class="nav-title">{{ scope.data.meta.title }}</span>
            </template>
          </nav-bar-wrap>
        </div>
        <div class="main-rigt">
          <transition name="fade-transform" mode="out-in">
            <router-view :key="key" />
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavGroup from "./components/NavGroup.vue";
import HeaderUerInfo from "./components/Header.vue";
import NavBarWrap from "@/components/nav-bar-wrap";
import SearchInput from "@/components/search-input";
export default {
  components: {
    NavGroup,
    HeaderUerInfo,
    NavBarWrap,
    SearchInput,
  },
  data() {
    return {
      selectIndex: 0,
    };
  },
  computed: {
    key() {
      return this.$route.path;
    },
    routes() {
      try {
        const find = this.$router.options.routes.find(
          (item) => item.path == "/Home"
        );
        return find.children;
      } catch (error) {
        return new Array();
      }
    },
  },
  watch: {
    $route: {
      immediate: true,
      handler(to, from) {
        // console.log("路由变化了");
        this.selectIndex = this.routes.findIndex(
          (item) => item.name == to.name
        );
      },
    },
  },
  methods: {
    // 切换页面
    handle(data) {
      this.$router.push({
        name: data.name,
      });
    },
    // 预览
    viewPage(item) {
      this.$router.push({
        name: "Page",
        query: {
          Id: item.pageId,
        },
      });
    },
    // 编辑页面
    editPage(item) {
      const pageId = `PG${new Date().valueOf()}`;
      this.$router.push({
        name: "Design",
        query: {
          Id: item.pageId,
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.tabs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-color);

  .tab-pane {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-right: 16px;
    height: 100%;
    font-size: 14px;
    color: var(--color);
    cursor: pointer;

    .tab-label {
      margin: 0 6px;
    }

    &:hover {
      color: var(--font-hover);

      .svg-icon {
        color: var(--font-hover);
      }
    }
  }
}

.home-container {
  width: 100%;
  height: 100vh;
  background: var(--background);
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  .home-content {
    flex: 1;
    min-width: calc(100% - 64px);
    height: 100%;
    display: flex;
    flex-direction: column;

    .herder-container {
      width: 100%;
      min-height: 48px;
    }

    .main-container {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
}

.main-left {
  width: 245px;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  background: var(--background);
  border-right: 1px solid var(--border-color);

  .nav-icon {
    width: 24px;
    height: 24px;
    color: #eee;
  }

  .nav-title {
    min-width: 120px;
    margin: 0 8px;
  }
}

.main-rigt {
  flex: 1;
  min-width: calc(100% - 245px);
  height: 100%;
  border-radius: 4px;
}

.page-item {
  position: relative;
  width: 200px;
  height: 160px;
  margin-bottom: 8px;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--page-background);
  box-shadow: rgb(0 0 0 / 8%) 0px 2px 4px 0px;

  &:hover {
    .page-hover {
      top: 0px;
      opacity: 1;
    }

    .page-item-info {
      transform: translateY(-100%);
      opacity: 0;
    }
  }

  .page-item-info {
    position: absolute;
    top: 0;
    width: 200px;
    height: 160px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: var(--font-color);
    transition: all 0.28s ease;
  }

  .page-hover {
    position: absolute;
    top: 160px;
    width: 100%;
    height: 100%;
    background-color: var(--page-background);
    color: var(--font-color);
    opacity: 0;
    transition: all 0.28s ease;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 24;

    .item-button {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      height: 100%;

      &:hover {
        color: var(--font-hover);
        background: var(--background-hover);
      }
    }
  }
}

.svg-icon {
  color: var(--font-color);
}
</style>
